<template>
  <div class="container">
    <div class="btn-box">
      <el-button type="primary" @click="addNewData"> 新增 </el-button>
    </div>
    <el-form :model="formData" ref="form" :rules="formRules">
      <el-table
        :data="formData.data"
        stripe
        border
        :cell-class-name="tableCellClassName"
        size="small"
        @cell-click="cellClick"
      >
        <el-table-column label="联合国编号">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-form-item
                :prop="`data.${scope.$index}.dangerUnno`"
                :rules="formRules.dangerUnno"
              >
                <el-input
                  v-model="scope.row.dangerUnno"
                  ref="dangerUnnoRef"
                  size="small"
                />
              </el-form-item>
            </div>
            <span v-else>
              {{ scope.row.dangerUnno }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="危品类别">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.dangerType"
                ref="dangerTypeRef"
                size="small"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.dangerType }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="危品页码">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.dangerPage"
                ref="dangerPageRef"
                size="small"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.dangerPage }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="危险品标签">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.dangerLabel"
                ref="dangerLabelRef"
                size="small"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.dangerLabel }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="闪点">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.dangerFlashPoint"
                ref="dangerFlashPointRef"
                size="small"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.dangerFlashPoint }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="闪点单位">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-select
                v-model="scope.row.dangerFlashPointUnit"
                size="small"
                ref="dangerFlashPointUnitRef"
              >
                <el-option value="C"> </el-option>
                <el-option value="F"> </el-option>
              </el-select>
            </div>
            <span v-else>
              {{ scope.row.dangerFlashPointUnit }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="应急措施号">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.emergencyMeasureNo"
                ref="emergencyMeasureNoRef"
                size="small"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.emergencyMeasureNo }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="应急联系人">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.linkman"
                ref="linkmanRef"
                size="small"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.linkman }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="联系电话">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.linktel"
                ref="linktelRef"
                size="small"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.linktel }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="联系邮件">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input v-model="scope.row.email" ref="emailRef" size="small">
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.email }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input v-model="scope.row.memo" ref="memoRef" size="small">
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.memo }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="danger" @click="deleteData(scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    //详细数据
    tableData: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["update:tableData"],
  computed: {
    inTableData: {
      get() {
        return this.tableData;
      },
      set(value) {
        this.$emit("update:tableData", value);
      },
    },
  },
  data() {
    const unnoRule = (rule, value, callback) => {
      const reg = /[a-zA-Z][0-9]+$/;
      if (value && !reg.test(value)) {
        callback(new Error("输入格式为英文加数字"));
      } else {
        callback();
      }
    };
    return {
      rowIndex: -1, //行索引
      columnIndex: -1, //列索引

      formRules: {
        dangerUnno: [{ validator: unnoRule, trigger: "change" }],
      },
      formData: {
        data: this.tableData,
      },
    };
  },
  methods: {
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      column.index = columnIndex;
      row.index = rowIndex;
    },
    //单元格被点击时会触发该事件
    cellClick(row, column, cell, event) {
      this.rowIndex = row.index;
      this.columnIndex = column.index;
      this.$nextTick(() => {
        if (column.label == "联合国编号") {
          this.$refs["dangerUnnoRef"].focus();
        } else if (column.label == "危品类别") {
          this.$refs["dangerTypeRef"].focus();
        } else if (column.label == "危品页码") {
          this.$refs["dangerPageRef"].focus();
        } else if (column.label == "危险品标签") {
          this.$refs["dangerLabelRef"].focus();
        } else if (column.label == "闪点") {
          this.$refs["dangerFlashPointRef"].focus();
        } else if (column.label == "闪点单位") {
          this.$refs["dangerFlashPointUnitRef"].focus();
        } else if (column.label == "应急措施号") {
          this.$refs["emergencyMeasureNoRef"].focus();
        } else if (column.label == "应急联系人") {
          this.$refs["linkmanRef"].focus();
        } else if (column.label == "联系电话") {
          this.$refs["linktelRef"].focus();
        } else if (column.label == "联系邮件") {
          this.$refs["emailRef"].focus();
        } else if (column.label == "备注") {
          this.$refs["memoRef"].focus();
        }
      });
    },
    //输入框失去焦点事件
    inputBlur(scope) {
      this.rowIndex = -1;
      this.columnIndex = -1;
    },
    addNewData() {
      this.inTableData.push({
        dangerUnno: "",
        dangerType: "",
        dangerPage: "",
        dangerLabel: "",
        dangerFlashPoint: "",
        dangerFlashPointUnit: "C",
        emergencyMeasureNo: "",
        linkman: "",
        linktel: "",
        email: "",
        memo: "",
        ruleShow: false,
      });
    },
    deleteData(index) {
      this.inTableData.splice(index, 1);
    },
    validData() {
      return this.$refs.form.validate((vaild) => {
        console.log(vaild)
        if (vaild) {
        } else {
          this.$message.warning("特货信息 存在联合国编号验证失败");
          
        }
        return vaild
      });
    },
  },
  watch: {},
  mounted() {},
});
</script>

<style lang="scss" scoped>
.container {
  padding: 8px 0 0 8px;
  .btn-box {
    margin-bottom: 8px;
  }
  .rule-title {
    color: #f56c6c;
    font-size: 12px;
    top: 100%;
  }
}
</style>
